/* eslint-disable indent */
import React, { memo, FC } from 'react';
import _ from 'lodash';
import { Radio, RadioChangeEvent } from 'antd';
import classnames from 'classnames';
import { RadioGroupButtonStyle } from 'antd/es/radio';

interface IProps {
  options?: { label: string; value: string | number; disabled?: boolean }[];
  optionType?: string;
  onChange?: (e: RadioChangeEvent) => void;
  value?: any;
  buttonStyle?: RadioGroupButtonStyle;
  className?: string;
  disabled?: boolean;
}

const CommonRadio: FC<IProps> = memo(function CommonRadio({
  options = [],
  optionType = 'default',
  onChange = (e: RadioChangeEvent) => {},
  value,
  buttonStyle = 'solid',
  className = '',
  disabled = false,
}) {
  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={value}
        className={classnames('common-radio', {
          [className]: true,
        })}
        buttonStyle={buttonStyle}
        disabled={disabled}
      >
        {optionType === 'default'
          ? _.map(options, (item) => {
              return (
                <Radio
                  key={item.label}
                  value={item.value}
                  style={{
                    lineHeight: '32px',
                  }}
                  disabled={item.disabled}
                >
                  {item.label}
                </Radio>
              );
            })
          : _.map(options, (item) => {
              return (
                <Radio.Button
                  key={item.label}
                  value={item.value}
                  style={{
                    lineHeight: '32px',
                  }}
                  disabled={item.disabled}
                >
                  {item.label}
                </Radio.Button>
              );
            })}
      </Radio.Group>
    </>
  );
});

export default CommonRadio;
